<template>
  <!--  关注-->
  <div class="app">
    <div class="message">
      <div class="msg_left">按关注时间排序</div>
      <div class="msg_right">
        <span v-for="item in msg" :key="item">{{ item }}</span>
      </div>
    </div>
    <!--    本周更新-->
    <div class="card_f">
      <div inset class="card">
        <span>本周更新</span>
        <span>1人更新 <van-icon name="arrow" /></span>
      </div>
    </div>

    <!--    //下拉刷新-->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <p v-for="item in list" :key="item.id" class="dataCard">
        <img :src="item.avatarUrl" alt="" class="headerImg" />
        <span class="friends">{{ item.nickname }}</span>
      </p>
    </van-list>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: ["全部", "歌手", "用户"],
      list: [],
      loading: false,
      finished: false,
      uid: localStorage.getItem("uid"),
      page: 1,
    };
  },
  computed: {},
  watch: {},
  methods: {
    watchList() {
      this.loading = true;
      this.$http
        .get(`http://localhost:3000/user/follows?uid=${this.uid}`, {
          withCredentials: true,
          page: this.page,
        })
        .then((res) => {
          this.list = res.data.follow;
          if (res.data.follow < 5) {
            // 如果<8表示已经没有数据了
            this.finished = true; //当上拉到底部onLoad不再执行
          } else {
            //如果 还有数据，那么继续加载
            this.page++;
          }
        });
      this.loading = false;
      if (this.list.length > 25) {
        this.finished = true;
      }
    },
    onLoad() {
      //默认只执行一次
      this.watchList();
    },
  },
  created() {},
  mounted() {},
  components: {},
};
</script>
<style scoped>
.app {
  height: 3rem;
  width: 100%;
  background: #fff;
}
.message {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 95%;
  height: 3rem;
  margin: 0 auto;
  font-size: 0.9rem;
  color: #414141;
}
.msg_right span::after {
  content: "|";
  margin: 0 0.5rem;
  color: #999999;
}
.msg_right span {
  color: #999999;
}
.msg_right span:last-child::after {
  content: "";
}
.headerImg {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  margin-left: 1rem;
}
.dataCard {
  display: flex;
  align-items: center;
  width: 100%;
  height: 6rem;
  font-size: 14px;
  background: #fff;
}
.friends {
  flex: 1;
  display: flex;
  align-items: center;
  height: 100%;
  margin-left: 1.2rem;
  border-bottom: 1px solid #c1c0c0;
}
.card {
  background: #fff;
  border: 1px solid #e6e6e6;
  display: flex;
  margin: auto;
  justify-content: space-between;
  width: 95%;
  align-items: center;
  border-radius: 10px;
  height: 3rem;
  font-size: 14px;
}
.card_f {
  width: 100%;
  height: 3.5rem;
  background: #fff;
  padding: 0.5rem 0;
}
.card span {
  margin: 0 0.8rem;
}
</style>
